<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>jscript09요소추가삭제</title>
	</head>
	<body>
		<h1>요소추가삭제</h1>
		<h3>DOM Nodes</h3>
		<p>W3C HTML DOM에 따르면 HTML 문서내 모든 것은 node로 취급</p>
		<p>문서노드 : 문서 전체를 가리킴</p>
		<p>요소 노드 : 문서내 각 요소(태그)를 가리킴</p>
		<p>텍스트 노드 : 각 요소내 문자열을 가리킴</p>
		<p>속성 노드 : 각 요소의 속성을 가리킴</p>
		<p>주석 노드 : 문서내 주석을 가리킴</p>
		<hr />
		<h3>노드의 관계</h3>
		<p>최상위노드(root) : 계층구조 중 맨위에 단 하나만 존재</p>
		<p>모든 노드(root는 제외)는 하나의 부모노드가 존재</p>
		<p>각 노드는 최소 0 이상의 자식노드가 존재</p>
		<p>형제노드는 같은 부모 밑의 노드들을 의미</p>
		<hr />
		<p>document.documentElement : 문서 전체를 가리킴</p>
		<p>document.body : body 요소를 가리킴</p>
		<p>parentNode : 부모 노드를 가리킴</p>
		<p>childNode : 자식 노드들을 가리킴(배열)</p>
		<p>firstChild : 첫번째 자식 노드를 가리킴</p>
		<p>lastChild : 마지막 자식 노드를 가리킴</p>
		<p>nodeValue : 노드의 값을 가리킴</p>
		<hr />
		<script type="text/javascript">
			document.write( alert( document.documentElement.innerHTML ) ); 
			document.write( alert( document.body.innerHTML ) );
			document.write( alert( document.body.firstChild ) );
			document.write( alert( document.getElementsByTagName("h1")[0].childNodes[0].nodeValue ) );
			document.write( alert( document.body.lastChild ) );
		</script>
		<hr />
		<h3>요소 추가 및 삭제</h3>
			<p>document.createElement() : 새로운 요소 생성</p>
			<p>document.createAttribute() : 새로운 속성 생성</p>
			<p>document.createTextNode() : 새로운 텍스트 생성</p>
			<p>document.appendChild() : 자식요소로 추가</p>
			<p>document.removeChild() : 자식요소를 제거</p>
			<hr />
			<button id="btn01">동적으로 h1 요소 생성</button>
			<button id="btn02">동적으로 버튼 요소 생성</button>
			<button id="btn03">동적으로 이미지 요소 생성</button>
			<button id="btn04">동적으로 목록요소 생성</button>
			<button id="btn05">동적으로 모달창 생성</button>
			<hr />
		<script type="text/javascript">
		var btn01 = document.getElementById("btn01");
		var btn02 = document.getElementById("btn02");
		var btn03 = document.getElementById("btn03");
		var btn04 = document.getElementById("btn04");
		var btn05 = document.getElementById("btn05");
		
		btn01.addEventListener("click", dyn01, true);
		btn02.addEventListener("click", dyn02, true);
		btn03.addEventListener("click", dyn03, true);
		btn04.addEventListener("click", dyn04, true);
		btn05.addEventListener("click", dyn05, true);
		
		function dyn01() {
			var h1 = document.createElement("h1");
			var txt = document.createTextNode(
				"동적으로 생성한 h1 요소");
			h1.appendChild( txt );
			document.body.appendChild( h1 );
		}
		function dyn02() {
			var btn = document.createElement("button");
			var txt = document.createTextNode(
				"동적으로 생성한 새로운 버튼");
			btn.appendChild( txt );
			document.body.appendChild( btn );	
		}
		function dyn03() {
			var img = document.createElement("img");
			//var src = document.createAttribute("src");
			//src.value = "images/suji01b.jpg";
			//img.setAttributeNode( src );
			img.setAttribute( "src", "images/suji01b.jpg" );
			document.body.appendChild( img );
		}
		
		// <select><option>1</option></select>
		function dyn04() {
			var select =  document.createElement("select");
			for( var i = 1; i <= 5; ++i  ) {
				var option =  document.createElement("option");
				var txt = document.createTextNode( " 항목 " + i );
				option.appendChild( txt );
				select.appendChild( option );
			}
			
			document.body.appendChild( select );
		}
		function dyn05() {
			var shadow = document.createElement("div");
			var style01 = 
				" width: 2000px; height: 2000px; " +
				" background: black; top: 0; left: 0; " +
				" position: absolute; opacity: 0.8 ";
			shadow.setAttribute("style", style01);
			
			var pouup = document.createElement("div");
			
			document.body.appendChild( shadow );
		}
	</script>
	</body>
</html>